<template>
	<view class="home" >
		<view class="home-head">
			<home-head-com :is-mini-search-show="isMiniSearchShow"></home-head-com>
			<view class="banner" >
				<swiper class="swiper1"  :indicator-dots="true" indicator-color="#FFFFFF" indicator-active-color="#fff" :autoplay="true" :interval="6000" :duration="1000" :circular="true" :touchable="false"  active-class="swipper-item-class" >
				  <swiper-item @click="goCallFriendPage()" class="swiper-item">
				    <image src="/static/images/miaosang/banner.jpg" class="bannerImg" mode=""></image>
				  </swiper-item>
				</swiper>
			</view>
		</view>
		<view class="index-desc">
			TEST TEST TEST TEST TEST TESTTEST TEST TESTTEST TEST TESTTEST TEST TESTTEST TEST TESTTEST TEST TESTTEST TEST TESTTEST TEST TESTTEST TEST TESTTEST TEST TEST TEST TEST TESTTEST TEST TESTTEST TEST TESTTEST TEST TESTTEST TEST TESTTEST TEST TESTTEST TEST TESTTEST TEST TESTTEST TEST TESTTEST TEST TEST TEST TEST TESTTEST TEST TESTTEST TEST TESTTEST TEST TESTTEST TEST TESTTEST TEST TESTTEST TEST TESTTEST TEST TESTTEST TEST TEST
		</view>
		
		<view class="home-content">
			
			<view class="products">
				<products-list-com :products="pageItems"  :pageHasNoMore="pageHasNoMore" :scrollTop="scrollTop" :isFromHome="isFromHome"></products-list-com>
			</view>
		</view>
		<!-- <image class="return-top" mode="aspectFit" v-if="isTopButtonShow" @click="returnTop" src="/static/images/return-top.png"></image> -->
	</view>
</template>

<script>
	import Pagination from "mixins/Pagination"
	import { login } from 'api/authApi';
	import { getVideos} from "api/videoApi"
	import { getBroadcasts } from "api/broadcastApi"
	import GiftVipCardCom from "components/common/GiftVipCardCom"
	import HomeHeadCom from "components/common/HomeHeadCom"
	import BroadcastCom from 'components/common/BroadcastCom'
	import CategoryNavCom from "components/category/CategoryNavCom"
	import ProductsListCom from "components/product/ProductsListCom"
	import store from "store"
	import {mapGetters,mapActions} from 'vuex'
	
	export default {
		store,
		components:{
			CategoryNavCom,
			/* 
			GiftVipCardCom,
			
			BroadcastCom, */
			HomeHeadCom,
			ProductsListCom
		},
		mixins:[
			Pagination
		],
		computed: {
			...mapGetters(['isLogin'])
		},
		data() {
			return {
				isMiniSearchShow:false,
				isTopButtonShow: false,
				broadcasts:[],
				categoryIndex: 0,
				categoryDefault:true,
				categoryId:'',
				homeHeadHeight: 0,
				scrollTop:0,
				isFromHome:true,
				HotRfresh:true,
				shopList:{
					currentIndex:0,
					data:[
						{name:'上新',status:0},
						{name:'销量',status:0},
						{name:'价格',status:0}
					]
				},
			}
		},
		methods: {
			...mapActions([
				'login'
			]),
			goToSearchPage() {
			  uni.navigateTo({url: '/packs/pages/product/search'})
			},
			goCallFriendPage() {
			  uni.navigateTo({url: '/packs/pages/callFriend/callFriend'})
			},
			goMine() {
			  this.getUserInfo();
			},
			
			goMemberCenter() {
			  uni.navigateTo({url: '/packs/pages/user/member?index=1'})
			},
			goGetRedpackagePage(){
				uni.navigateTo({url: '/packs/pages/getRedpackage/getRedpackage'})
			},
			categoryClicked(params) { //选项卡切换
				this.categoryIndex = params.index
				this.categoryId = params.id
				this.categoryDefault = params.default;
				this.pageNumber = 1
				this.pageHasNoMore = false
				this.loadPageData()
				if(this.scrollTop>=this.categoryTop){
					var timer = setTimeout(()=>{
					    uni.pageScrollTo({ 
					        scrollTop:this.categoryTop,  //距离页面顶部的距离
					        duration: 0
					    });
					    clearTimeout(timer);
					},500)
				}
			},
			changeTab(index){
			                
				// 索引值
				let idx = this.shopList.currentIndex;
			
				// 具体哪一个对象
				let item = this.shopList.data[idx]; 
				if(idx == index){
					return item.status = item.status === 1 ? 2 : 1 
				}
				
				// 新值
				let newItem = this.shopList.data[index];
				item.status = 0; //旧的回复默认
				this.shopList.currentIndex = index;
				newItem.status = 1; // 新的给颜色
			},
			
			getUserInfo() {
			  // 展示加载框
			  uni.showLoading({
				title: '加载中',
			  });
			  uni.getUserProfile({
				desc: '登录后可同步数据',
				success: async (obj) => {
				  console.log('obj', obj);
				  // 调用 action ，请求登录接口
				  // await this.login(obj);
				  uni.login({
					provider: 'weixin',
					success: (res) => {
					  console.log('res-login', res);
					  this.code = res.code;
					  console.log('code', res.code);
					  if (res.errMsg == 'login:ok') {
						  let params = {
						  	code:this.code,
						  }
						 this.login(params);
					  }
					},
				  });
				},
				fail: () => {
				  uni.showToast({
					title: '授权已取消',
					icon: 'error',
					mask: true,
				  });
				},
				complete: () => {
				  // 隐藏loading
				  uni.hideLoading();
				},
			  });
			},
			async goGoldstorm(){
				if (!await this.isLogin) {
					uni.navigateTo({
						url: '/packs/pages/auth/auth'
					})  
				}else{
					uni.navigateTo({
						url: '/pages/drink/drink'
					})
				}
			},
			async goDrink(){
				if (!await this.isLogin) {
					uni.navigateTo({
						url: '/packs/pages/auth/auth'
					})  
				}else{
					uni.navigateTo({
						url: '/packs/pages/drink/drink'
					})
				}
			},
			async loadBroadcasts() { //获取广播数据
				const response = await getBroadcasts()
				
				this.broadcasts = response.data
			},
			
			async loadPageItems() {
				
				return await getVideos({
					page: this.pageNumber,
				  })
				
			},
			returnTop() {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 100
				})
			},
			downLoad(){
				uni.navigateTo({url: '/packs/pages/download/download'})
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
			if (e.scrollTop >= 42) {
				this.isMiniSearchShow = true
				this.isTopButtonShow = true
			} else {
				this.isMiniSearchShow = false
				this.isTopButtonShow = false
			}
		},
		async onLoad(options){
			/* if (window.history && window.history.pushState) {
				history.pushState(null, null, document.URL);
			} */
			await this.loadPageData()
			//await this.loadBroadcasts()
		},
		onShow() {
			uni.getStorage({ 
			    key:"newsTop",
			    success:(res)=> {
							setTimeout(()=>{
								uni.pageScrollTo({
								    scrollTop: res.data,  //距离页面顶部的距离
								    duration: 10
								});
							},100)
			    }
			})
		},
		onReady() {
			/* this.categoryTop =  this.$refs.category.$el.getBoundingClientRect().top */
		}
	}
</script>

<style scoped lang="scss">
	page{
		background: #F6F6F6;
	}
	.home{
		background-image: url("");
	}
	.home-head {
		background-image: url("");
	}
	
	.product-search-box{
		width: 750rpx;
		height: 84rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 10rpx;
	}
	.search-ipt{
		width:578rpx;
		height: 64rpx;
		border-radius: 36rpx 40rpx 40rpx 36rpx;
		border: 2rpx solid #555555;
		display: flex;
		align-items: center;
		padding-left:24rpx;
		margin-left: 20rpx;
		>view{
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #CCCCCC;
			margin-left: 12rpx;
		}
	}
	.serach-icon{
		display: block;
		width:32rpx;
		height: 32rpx;
	}
	.red-package{
		width: 64rpx;
		height: 64rpx;
		margin-right: 32rpx;
	}
	.red-package-img{
		display: block;
		width: 64rpx;
		height: 64rpx;
	}
	
	.red-package{
		animation-name: zoom;
		animation-duration: 1.2s;
		animation-iteration-count: infinite;

	}
	
	@keyframes zoom {
	  0%   {
			transform: scale(1);
		}
	  50%  {
			transform: scale(1.1);
		}
	  100% {
			transform: scale(1);
		}
	}
	
	
	
	.banner{
		
		position: relative;
		width:100%;
		max-width:1920px;
		margin:0 auto;
		.swiper1{
			width:100%;
			height:560px;
		}
	
	}
	.bannerImg{
		display: block;
		width: 100%;
		height: 560px;
		margin: 0 auto;
	}
	.not-login{
		height:174rpx;
		width:702rpx;
		text-align: center;
		margin:0 auto;
		position:relative;
		.hyImg{
			width:100%;
			height:100%;
			position: absolute;
			left: 0;
			
		}
		>text{
			position: absolute;
			top: 80rpx;
			font-weight:600;
			left:0;
			width:100%;
			color:#fff;
		}
	}
	
	.link-to{
		
		width:750rpx;
		height:137rpx;
		display:flex;
		justify-content: space-between;
		margin-top:20rpx;
		.link-left{
			width:341rpx;
			height:137rpx;
			float:left;
			margin-left:26rpx;
			
			>image{
				height:137rpx;
				width:341rpx;
				
			}
		}
		.link-right{
			width:341rpx;
			height:137rpx;
			float:left;
			margin-right:26rpx;
			>image{
				height:137rpx;
				width:341rpx;
				
			}
		}
		
		
	}
	
	.hot{
		padding: 0 20rpx;
		margin-top: 20rpx;
	}
	
	.categories {
		background-color: #F6F6F6;
		z-index: 9;
	}
	
	.products{
		padding:0 20rpx;
	}
	
	.return-top {
		width: 96rpx;
		height: 96rpx;
		position: fixed;
		bottom: 280rpx;
		right: 32rpx;
		
	}
	.actity {
		height:893rpx;
		margin:20rpx auto 0rpx;
		width:750rpx;
		.swiper1{
			width:750rpx;
			height:893rpx;
		}
	}
	.box{
		display:block;
		width:352rpx;
		float:left;
		height:512rpx;
	}
	.boxImg{
		display: block;
		width:352rpx;
		height:512rpx;
		margin: 0 auto;
	}
	.drink{
		display:block;
		width:352rpx;
		float:right;
		height:512rpx;
		.drinkImg{
			display: block;
			width:352rpx;
			height:512rpx;
			margin: 0 auto;
		}
	}
	.slogan{
		width:100%;
		color:#fff;
		
		text-align: center;
		>view:nth-child(1){
			font-size:46rpx;
			margin-top:50rpx;
		}
		>view:nth-child(2){
			margin-top:6rpx;
			font-size:46rpx;
			font-weight:600;
		}
		
	}
	.product-order{
		width:100%;
		height:74rpx;
		background-color:#fff;
		line-height:74rpx;
		overflow: hidden;
		margin-bottom:18rpx;
		font-size:28rpx;
	}
	
	.product-order-default{
		margin-left:30rpx;
		float:left;
	}
	.product-order-other {
		float:left;
		margin-left:124rpx;
	}
	.product-order-other image{
		height:24rpx;
		width:12rpx;
		margin-left:8rpx;
	}
	
	.index-desc{
		
		margin:50px auto 0;
		font-size:24px;
		width:1680px;
		line-height:36px;
	}
	
	
</style>
